<template>
  <div class="regbox">
    <header>
      <img
        @click="gotowhere('home')"
        src="../../assets/images/logo.png"
        alt=""
      />
    </header>

    <p class="text">注册</p>

    <van-row class="registerbox">
      <van-form ref="form" @submit="doneSubumit" @failed="validateFail">
        <van-field
          v-model="register.username"
          label="用户名"
          name="username"
          placeholder="请输入"
          left-icon="user-o"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
        </van-field>

        <van-field
          v-model="register.phone"
          label="手机号码"
          name="phone"
          placeholder="请输入"
          left-icon="phone-o"
          :rules="[
            { required: true, message: '请填写手机号码' },
            {
              pattern: $reg.phone,
              message: '请输入正确的手机号码',
            },
          ]"
        >
        </van-field>

        <van-field
          v-model="register.password"
          label="密码"
          name="password"
          placeholder="请输入"
          left-icon="bag-o"
          :right-icon="type1 == 'password' ? 'eye-o' : 'closed-eye'"
          :type="type1"
          @click-right-icon="changeType1"
          @blur="checkpassword"
          :rules="[
            { required: true, message: '请填写密码' },
            {
              pattern: $reg.pwd,
              message: '请输入6-16字母和数字',
            },
          ]"
        >
        </van-field>

        <van-field
          v-model="register.dbpassword"
          label="确认密码"
          name="dbpassword"
          placeholder="请输入"
          left-icon="bag-o"
          :right-icon="type2 == 'password' ? 'eye-o' : 'closed-eye'"
          :type="type2"
          @click-right-icon="changeType2"
          :rules="[
            { required: true, message: '请填写确认密码' },
            {
              pattern: $reg.pwd,
              message: '请输入6-16字母和数字',
            },
            {
              validator: checkPassEqual,
              message: '请确认两次密码是否一致',
            },
          ]"
        >
        </van-field>

        <div class="btn">
          <van-button block type="danger" native-type="submit"
            >立即注册</van-button
          >
        </div>
      </van-form>
    </van-row>
  </div>
</template>


<script>
export default {
  data() {
    return {
      register: {},
      type1: "password",
      type2: "password",
    };
  },
  methods: {
    validateFail() {
      this.$notify({
        message: "请先确认是否全部校验成功",
        color: "#ad0000",
        background: "#ffe1e1",
      });
    },
    doneSubumit(value) {
      console.log(value);
      this.$ajax
        .checkPhone({
          phone: value.phone,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.$notify({
              type: "danger",
              message: "注册失败,手机号码已经被注册",
            });
          } else {
            this.$ajax.register(value).then((res) => {
              this.$notify({ type: "success", message: "注册成功" });
              this.$router.push({
                name: "login",
                query: { phone: value.phone },
              });
            });
          }
        });
    },
    checkpassword() {
      if (this.register.dbpassword) {
        // 失去焦点的校验
        this.$refs.form.validate("dbpassword");
      }
    },
    checkPassEqual(val) { // 确定两个密码是否一致
      return this.register.password == val;
    },
    changeType1() {
      // 判断密码是否显示
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    changeType2() {
      // 判断密码是否显示
      this.type2 = this.type2 == "password" ? "text" : "password";
    },
  },
};
</script>

<style lang="scss" scoped>
.regbox {
  background: #f4f4f4;
  header {
    width: 100%;
    height: 80px;
    background: #fff;
    z-index: 100;
    border-bottom: 0.5px solid #b9b9b9;
    padding: 10px 20px;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .text {
    font-size: 22px;
    font-weight: 700;
    color: #1b1b1b;
    margin-left: 20px;
    margin-top: 15px;
  }
  .registerbox {
    padding: 10px;
   .btn{
     margin-top: 15px;
   }
   
  }
}
</style>